import React, { Component } from 'react'
import { Tree } from 'antd'
const TreeNode = Tree.TreeNode

const x = 3
const y = 2
const z = 1
const treeData = [
  {
    key: 'a', title: '0', children: [
    {key: '0-0-0', title: '0-0-0'},
    {key: '0-0-1', title: '0-0-1'},
  ]
  },
  {key: '0-2', title: '0-2'}
]
//const generateData = (_level, _preKey, _tns) => {
//    const preKey = _preKey || '0'
//    const tns = _tns || treeData
//    const children = []
//
//    for(let i = 0; i < x; i++){
//        const key = `${preKey}-${i}`
//        tns.push({ title: key, key })
//        if(i<y){
//            children.push(key)
//        }
//    }
//    if(_level<0){
//        return tns
//    }
//    const level=_level-1
//    children.forEach((key, index) => {
//        tns[index].children=[]
//        return generateData(level, key, tns[index].children)
//    })
//}
//generateData(z);

export default class TreeList extends Component {
  constructor(props) {
    super(props)
    this.state = {
      treeData,
      expandedKeys: ['0-0', '0-0-0', '0-0-0-0']
    }
  }

  onDrangEnter(info) {
    console.log((info))
  }

  onDrop(info) {
    console.log((info))
    const dropKey = info.node.props.eventKey
    const dragKey = info.dragNode.props.eventKey
    const loop = (data, key, callback)=> {
      data.forEach((item, index, arr)=> {
        if (item.key === key) {
          return callback(item, index, arr)
        }
        if (item.children) {
          return loop(item.children, key, callback)
        }
      })
    }
    const data = [...this.state.treeData];
    let dragObj;
    loop(data, dragKey, (item, index, arr) => {
      arr.splice(index, 1)
      dragObj = item
    })
    if (info.dropToGap) {
      let ar
      let i
      loop(data, dropKey, (item, index, arr) => {
        ar = arr
        i = indexx
      })
      ar.splice(i, 0, dragObj)
    } else {
      loop(data, dropKey, (item)=> {
        item.children = item.children || []
        item.children.push(dragObj)
      })
    }
    this.setState({
      treeData: data
    })
  }

  componentDidMount() {
    // debugger

  }

  onSelect(info) {
    console.log('selected', info)
  }


  render() {
    console.log(`66:`)
    console.log(this.state.treeData)
    const loop = data => data.map((item) => {
      if (item.children && item.children.length) {
        return <TreeNode key={item.key} title={item.title}>{loop(item.children)}</TreeNode>
      }
      return <TreeNode key={item.key} title={item.title}/>
    })
    const treeNodes = loop(this.state.treeData)
    return (
      <div className="detail-content">
        <Tree>
          {treeNodes}
        </Tree>
      </div>
    )
  }
}
